import { connect } from "react-redux";
import { useState, useEffect } from "react";
import { getCartListData } from '@/store/actions/cart';
// css
import styles from '@/styles/ShoppingCart.module.scss';
// 组件
import Spin from '@/components/Spin';
import Breadcrumb from '@/components/Breadcrumb';
import Empty from '@/pages_components/shopping_cart/Empty';
import CartTitle from '@/pages_components/shopping_cart/CartTitle';
import CartList from '@/pages_components/shopping_cart/CartList';
import CartSettle from '@/pages_components/shopping_cart/CartSettle';
import CartTip from '@/pages_components/shopping_cart/CartTip';

// 购物车
const Cart = ({ _getCartListData, cart: { total } }) => {

    const [loading, setLoading] = useState(true);

    useEffect(() => {

        _getCartListData();

        setTimeout(() => {
            setLoading(false);
        }, 1000);
    }, []);

    return (
        <div className={styles['shopping-cart']}>
            <Spin loading={loading} />
            <div className="max-content">
                <Breadcrumb params={[{ name: '我的购物车', url: '/shopping_cart/' }]} />
                <section className={styles['content']}>
                    <CartTitle total={total} />
                    {
                        !total
                        ? <Empty />
                        : <>
                            <CartList />
                            <CartSettle />
                            <CartTip />
                        </>
                    }
                </section>
            </div>
        </div>
    )
}

const mapStateToProps = state => {
    return {
        cart: state.cart
    }
}
const mapDispatchToProps = dispatch => {
    return {
        _getCartListData: v => dispatch(getCartListData(v)),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Cart);